import React, { Component } from "react";
import { connect } from "react-redux";
import Header from "../../components/Header/Header";
import Search from "../../components/Search/Search";
import {actions,getBanner,getList,getNewList,getMoreList,getTimeList,getSeckList,getKey} from "../../store/modules/home"
import { Tabs, Swiper } from "antd-mobile";
import "./Home.less";
import { bindActionCreators } from "redux";

class Home extends Component {
    componentDidMount(){
        this.props.home.reqBanner();
        this.props.home.reqList();
        this.props.home.reqNewList();
        this.props.home.reqMoreList()
        this.props.home.reqTimeList()
        this.props.home.reqSeckList()
    }
  render() {
      let {banner,list,newList,moreList,seckList,history:{push},home:{change,getValue,search}} = this.props
    return (
      <>
        <Header title="首页"></Header>
        <Search
          search={() => search(push)}
          getValue={(e) => getValue(e)}
        ></Search>
        <Tabs defaultActiveKey="1" onChange={(e) => change(e,push)}>
          {list.map((item) => {
            return <Tabs.Tab key={item.id} title={item.catename}></Tabs.Tab>;
          })}
        </Tabs>

        <Swiper autoplay loop>
          {banner.map((item) => {
            return (
              <Swiper.Item key={item.id}>
                <img src={item.img} alt="" />
              </Swiper.Item>
            );
          })}
        </Swiper>

        {/* 新人专享 */}
        <div className="new">
          <h3>新人专享</h3>
          <div className="new_content">
            {newList.map((item) => {
              return (
                <div
                  className="new_item"
                  onClick={() =>
                    this.props.history.push("/detail?id=" + item.id)
                  }
                  key={item.id}
                >
                  <img src={item.img} alt="" />
                  <span className="nowPrice">&yen;{item.price}</span>
                  <span className="marketPrice">&yen;{item.market_price}</span>
                </div>
              );
            })}
          </div>
        </div>

        {/* 万人团 */}
        <div className="new">
          <h3>万人团</h3>
          <div className="new_content">
            {moreList.map((item) => {
              return (
                <div
                  className="new_item"
                  onClick={() =>
                    this.props.history.push("/detail?id=" + item.id + "&type=2")
                  }
                  key={item.id}
                >
                  <img src={item.img} alt="" />
                  <span className="nowPrice">&yen;{item.price}</span>
                  <span className="marketPrice">&yen;{item.market_price}</span>
                </div>
              );
            })}
          </div>
        </div>

        {/* 限时秒杀 */}
        <div className="new">
          <h3>限时秒杀</h3>
          <div className="new_content">
            {seckList.map((item) => {
              return (
                <div
                  className="new_item"
                  onClick={() =>
                    this.props.history.push("/detail?id=" + item.id)
                  }
                  key={item.id}
                >
                  <img src={item.img} alt="" />
                  <span className="nowPrice">&yen;{item.price}</span>
                  <span className="marketPrice">&yen;{item.market_price}</span>
                </div>
              );
            })}
          </div>
        </div>
      </>
    );
  }
}
const mapStateToProps = (state) => {
  return {
      banner:getBanner(state),
      list:getList(state),
      newList:getNewList(state),
      moreList:getMoreList(state),
      timeList:getTimeList(state),
      seckList:getSeckList(state),
      key:getKey(state)
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      home:bindActionCreators(actions,dispatch)
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
